<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-3.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

  <head>
    <title>Blog Editor</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<link rel="stylesheet" type="text/css" href="../assets/other/bootstrap.min.css" />
			<link rel="stylesheet" type="text/css" href="../assets/other/prettify.css" />
			<link rel="stylesheet" type="text/css" href="../assets/other/bootstrap-wysihtml5.css" />
			<link rel="stylesheet" href="../assets/css/bootstrap.css"/>
			<style>
			body{
				background: url('../images/wood_pattern.png');
				padding-top: 70px;
        		padding-bottom: 40px;
			}
			</style>
			<link rel="stylesheet" href="../assets/css/bootstrap-responsive.css"/>			
			
  </head>

  <body>
	<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
			          <span class="icon-bar"></span>
			          <span class="icon-bar"></span>
			          <span class="icon-bar"></span>
			        </a>
			        
					<h2><a class="brand" th:href="@{/vinapage}">Vina's home</a></h2>	
					
					<div class="nav-collapse">
					<ul class="nav">
						<li ><a href="home.html" th:href="@{/vinapage}">Home</a></li>
						<li class="active" ><a href="blog/list.html" th:href="@{/blog/list}">Blog</a></li>
						<li ><a href="about.html" th:href="@{/about}">About</a></li>

					</ul>
					</div>
				</div>
			</div>
	</div>
	
	<div class="container">
    <div class="hero-unit">
        <h2>Blog Editor</h2>
        <hr/>
        <h3>Title</h3>
        <input id="titletxt" type="text" style="width: 100%" />
		<textarea id="textarea" placeholder="Enter text ..." style="width: 100%; height: 200px"></textarea>
        
        <a id="btn" class="btn btn-primary">Submit</a>
    </div>
  
    </div>
    
    		<script src="../assets/other/wysihtml5-0.3.0_rc3.js"></script>
<!-- 			<script src="../assets/other/jquery-1.7.1.min.js"></script> -->
			<script src="../assets/js/jquery.js"></script>
			<script src="../assets/other/prettify.js"></script>
			<script src="../assets/other/bootstrap.min.js"></script>
			<script src="../assets/other/bootstrap-wysihtml5.js"></script>
			<script>
			//<![CDATA[
				$('#textarea').wysihtml5();
				$("#btn").click(function() {
					var str = $("#textarea").val()
					$.post("/blog/handler",{"title":$("#titletxt").val(),"content":str.replace(new RegExp("<br>","gm"),"<br/>")},
					function(data){
						alert("Data Loaded: " + data+","+data.toString());
						if(data.toString().length>1){
							alert("Saved!")
							window.location.replace("/blog/list")
						}else{
							alert("Failed!")
						}
					})
					// alert($('#textarea').val())
				});
			//]]>
			</script>
			<script type="text/javascript" charset="utf-8">
				$(prettyPrint);
			</script>
			
			
  </body>
  
</html>

